<!--
 * @Author: CNN 969682281@qq.com
 * @Date: 2023-03-07 13:36:39
 * @LastEditors: CNN 969682281@qq.com
 * @LastEditTime: 2024-01-05 15:41:05
 * @FilePath: \newMould_BHZ\src\views\WaterManage\trends\instantly.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 水稳----动态监控---实时监控 -->
  <div class="department" id="department">
    <!-- 右侧 -->
    <div class="department_right partner">
      <div class="app-container-btn">
        <el-button @click="goBack">返回</el-button>
      </div>

      <!-- 表格 -->
      <div
        class="text_table TensionRealTime multistageHeader TensionRealTimeFirstLevel"
      >
        <div
          class="dialogBodyBox TensionRealTimesecondLevelBox"
          style="position: relative; height: 61%"
        >
          <tableData
            :page="materialGetList.page"
            :pageSize="materialGetList.pageSize"
            height="100%"
            :config="material_config"
            :dataList="materialData"
            statusType="3"
            :level="level"
            :earlyWarning="earlyWarning"
            :currentRow="false"
            :stripe="false"
          />
          <PaginationS
            :info="queryCriteriaDatas_M"
            :total="queryCriteriaDatas_M.total"
            :pageNum.sync="materialGetList.page"
            :limit.sync="materialGetList.pageSize"
            @pagination="processDetailsFun(materialGetList)"
          />
        </div>
        <div class="dialogBodyBox" style="height: 39%">
          <div class="tab">
            <div
              v-for="(data, index) in typeData"
              :key="data.value"
              @click="changeType($event, index)"
            >
              <div
                class="btn"
                :style="{
                  color:
                    data.show === true ? 'rgba(0, 117, 255, 1)' : '#343639',
                  background: data.show === true ? '#E0EFFF' : '#fff',
                }"
              >
                {{ data.text }}
              </div>
            </div>
          </div>

          <div class="charts" v-if="typeData[0].show">
            <!-- 浆量-->
            <thickLiquidCharts
              v-loading="chartsLoading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.3)"
              :time1="this.value2[0]"
              :time2="this.value2[1]"
              :commonData="thickLiquidData"
            >
            </thickLiquidCharts>
          </div>

          <div class="charts" v-if="typeData[1].show">
            <!-- 压力 -->
            <pressureCharts
              v-loading="chartsLoading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.3)"
              :time1="this.value2[0]"
              :time2="this.value2[1]"
              :commonData="pressureData"
            >
            </pressureCharts>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import TableData from "@/components/waterManage/public/el-tables"; //主页面列表
import PaginationS from "@/components/TensionAndGrout/TensionManage/TensionRealTime/el-pagination"; //弹框分页

import thickLiquidCharts from "@/components/TensionAndGrout/TensionManage/GroutManage/thickLiquidCharts"; //浆量
import pressureCharts from "@/components/TensionAndGrout/TensionManage/GroutManage/pressureCharts"; //压力

// import publicForm from "@/components/public/el-form.vue"; //弹框form

import formJs from "./regexDetail.js"; //新增弹框配置项
import {
  getGroutingProcessDetailLists, //2级详情接口
} from "@/api/request.js";
// import { statusTypes1 } from "@/utils/config"; //配置项
export default {
  name: "GroutRealTimesecondLevel",
  components: {
    TableData, //主页面列表
    PaginationS,
    pressureCharts, //压力
    thickLiquidCharts, //浆量
  },
  data() {
    return {
      name: "GroutRealTimesecondLevel", //按钮配置页面代号
      editLoading: false,

      userInfo: {}, //登录用户

      // 详情
      materialData: [], //列表
      materialGetList: {
        namberId: "", // 孔号id
        fCompanyid: "",
        page: 1, // 当前页码
        pageSize: 15, // 每页显示条数
      }, //调取过程数据详情接口传参
      materialRow: null, //选择过程数据当前行数据
      navigatepageNums_M: null,
      queryCriteriaDatas_M: {}, //分页
      // xlsxName: null, //切换表格时文字
      loadingEditDialogCon: false, //弹框loading
      dialogEditVisibleCon: false, //新增弹框是否显示
      typeData: [
        { text: "浆量", show: true },
        { text: "压力", show: false },
      ],
      thickLiquidData: [], //浆量
      pressureData: [], //压力
      chartsLoading: false,
      level: [],
      earlyWarning: [], //预警标准
      material_config: formJs.material_config, //材料配置项
      // 详情
      value2: [],
      xlsxName: null,
    };
  },
  destroyed() {
    window.sessionStorage.removeItem("GxEmbedded_two");
  },
  mounted() {
    if (JSON.parse(sessionStorage.getItem("GxEmbedded_two"))) {
      var dataList = JSON.parse(sessionStorage.getItem("GxEmbedded_two"));
      this.materialGetList = {
        namberId: dataList.fNamberid, // 孔号id
        fCompanyid: dataList.fCompanyid,
        page: 1, // 当前页码
        pageSize: 15, // 每页显示条数
      };
      this.processDetailsFun(this.materialGetList);
    }

    this.getDate();
    // this.userInfo = JSON.parse(sessionStorage.getItem("GxEmbedded_userInfo"));
    // this.btnRole(this.name);
  },
  methods: {
    btnRole(name) {
      // 按钮权限
      var btnList = [];
      var ModuleList = JSON.parse(
        sessionStorage.getItem("GxEmbedded_instantly")
      );
      if (ModuleList.length > 0) {
        ModuleList.map((item) => {
          if (item.fEncode == name) {
            btnList = item.modulebuttonList;
          }
        });
        var btnStr = [];
        btnList.map((item) => {
          btnStr.push(item.fEncode);
        });
        // this.yj_view = btnStr.includes("yj_view");
      } else {
        // this.yj_view = true;
      }
    },

    // 过程数据----详情（2级详情）
    processDetailsFun(data) {
      getGroutingProcessDetailLists(data)
        .then((res) => {
          if (res.errcode == 0) {
            var that = this;
            that.loadingEditDialogCon = false;
            // that.dialogEditVisibleCon = true;
            that.materialData = res.data.pageInfo.list;
            that.queryCriteriaDatas_M = res.data.pageInfo; //分页信息
            that.navigatepageNums_M =
              that.queryCriteriaDatas_M.navigatepageNums.length;

            that.thickLiquidData = [
              res.data.line.holdingtimeList,
              res.data.line.feededamountList,
              res.data.line.outamountList,
            ]; //浆量--图表数据

            that.pressureData = [
              res.data.line.holdingtimeList,
              res.data.line.feededpressureList,
              res.data.line.outpressureList,
            ]; //压力--图表数据
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((error) => {
          this.$message.error(error.msg);
        });
    },
    // 点击图表切换
    changeType(e, index) {
      for (let i in this.typeData) {
        if (parseFloat(i) === index) {
          this.typeData[i].show = true;
        } else {
          this.typeData[i].show = false;
        }
      }

      this.typeDataNum = index;
      // this.yj_searchForm(this.getList);
    },
    goBack() {
      this.$router.back();
    },
    getDate() {
      if (JSON.parse(sessionStorage.getItem("GxEmbedded_getLists"))) {
        var getList = JSON.parse(sessionStorage.getItem("GxEmbedded_getLists"));

        this.value2 = [getList.startDates, getList.endDates];
        this.xlsxName =
          getList.startDates + "至" + getList.endDates + "压浆超标数据监控";
      } else {
        this.value2 = [
          this.common.getDay(-90) + " " + "00:00:00",
          this.common.getDay(0) + " " + "23:59:59",
        ];
        this.xlsxName =
          this.common.getDay(-90) +
          "至" +
          this.common.getDay(0) +
          " " +
          "23:59:59" +
          "压浆超标数据监控";
      }
    },
    // 多选方法
    selectionChange() {},
    // 排序方法
    sortChange() {},
  },
};
</script>
  
  
<style scoped lang='less'>
.printTables {
  background: #fff;
  display: flex;
  justify-content: end;
  padding: 5px;
  margin-top: 10px;
}

.TensionRealTimesecondLevelBox {
  display: flex;
  flex-direction: column;

  // justify-content: space-between;
  // align-items: flex-end;
}

.dialogBodyBox .tab {
  display: flex;
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  border-bottom: 2px solid #e4e7ed;
  padding: 0 0.16rem;
}

.dialogBody {
  padding: 3px 20px;
  height: 98%;
}

.dialogBodyBox {
  .tab {
    display: flex;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    box-sizing: border-box;
    border-bottom: 2px solid #e4e7ed;
    padding: 0 0.16rem;

    .btn {
      margin-top: 4px;
      // margin-right: 16px;
      width: 80px;
      height: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-top-right-radius: 4px;
      border-top-left-radius: 4px;
    }
  }

  .charts {
    height: calc(100% - 30px);
  }
}

// }

.mechanism_dialogS /deep/ .el-table__body-wrapper {
  height: calc(100% - 84px);
  overflow-y: auto;
}

.mechanism_dialogS /deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 10px; //调纵向滚动条显示隐藏
  height: 10px; //调横向滚动条显示隐藏
  z-index: 99999999 !important;
}

.common .block {
  bottom: 5px !important;
}
</style>
  